<script setup>
//4.使用defineProps()接收父组件传递过来的props
let props = defineProps({
  person: {
    type: Object,
    required: true,
    default: () => {
    }
  },
})
// 5.使用defineEmits()声明组件的自定义事件
let emits = defineEmits(["change"])
const change = () => {
  // 6.使用emits触发一个change事件去通知父组件修改
  emits("change")
}

// 子组件修改父组件传递过来的person(不建议修改,因为vue建议单向数据流)
const changePersonAge = () => {
  props.person.age++
}
</script>

<template>
  <div class="son">
    <h1>son:{{ person }}</h1>
    <button @click="change">向父组件触发一个自定义事件</button>
    <button @click="changePersonAge">子组件修改父组件传递过来的person.age</button>
  </div>
</template>

<style scoped lang="less"></style>